<template lang="">
  <div class="box">
    <div class="top_box">
      <t-form>
        <t-form-item label="角色名称" name="name" initialData="TDesign">
          <t-input placeholder="请输入角色名称" />
        </t-form-item>
        <t-button
          theme="primary"
          class="btn"
          type="submit"
          style="background-color: rgb(59, 182, 254); border: 0"
          >查询</t-button
        >
        <t-button
          theme="default"
          class="btn"
          variant="base"
          type="reset"
          style="
            color: rgb(59, 182, 254);
            border: 1px solid rgb(59, 182, 254);
            background-color: #fff;
          "
          >重置</t-button
        >
        <t-button
          theme="primary"
          class="btn rigth"
          type="submit"
          style="background-color: rgb(59, 182, 254); border: 0"
          >添加角色</t-button
        >
      </t-form>
    </div>
    <div class="tab_box">
      <div class="result">
        查询结果：<span class="number">共计2条</span>数据
      </div>
      <t-table
        row-key="index"
        :data="data"
        :columns="columns"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :size="size"
        :pagination="pagination"
        :show-header="showHeader"
        cell-empty-content="-"
        resizable
        @row-click="handleRowClick"
        stripe
      >
        <template #operation="{ row }">
          <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
            编辑
          </t-link>
          <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
            删除
          </t-link>
          <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
            设为默认值
          </t-link>
        </template>
      </t-table>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import {
  ErrorCircleFilledIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
} from "tdesign-icons-vue-next";

const statusNameListMap = {
  0: { label: "进行中", theme: "success" },
  1: { label: "已结束", theme: "danger" },
  2: { label: "未开始", theme: "warning" },
};
const data = [];
const total = 28;
for (let i = 0; i < total; i++) {
  data.push({
    index: i + 1,
    applicant: ["贾明", "张三", "王芳"][i % 3],
    serial: ["52342", "52346", "52167"][i % 3],
    status: i % 3,
    channel: ["2022.12.30  00:00", "2023.12.30  00:00", "2021.12.30  00:00"][
      i % 3
    ],
    detail: {
      email: ["w.cezkdudy@lhll.au", "r.nmgw@peurezgn.sl", "p.cumx@rampblpa.ru"][
        i % 3
      ],
    },
    matters: [
      "宣传物料制作费用",
      "algolia 服务报销",
      "相关周边制作费",
      "激励奖品快递费",
    ][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: [
      "2022-01-01",
      "2022-02-01",
      "2022-03-01",
      "2022-04-01",
      "2022-05-01",
    ][i % 4],
    role: ["1"],
    id: ["1"],
    job_number: ["1"],
    account: ["1"],
    cipher: ["2"],
    phone_number: ["3"],
    time: ["4"],
    Status: ["5"],
  });
}

const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref("medium");
const showHeader = ref(true);

const columns = ref([
  { colKey: "index", title: "序号", align: "center", width: 280 },
  { colKey: "applicant", title: "角色名称", align: "center", width: 300 },
  // {
  //   colKey: "status",
  //   title: "角色名称",
  //   cell: (h, { row }) => {
  //     return (
  //       <t-tag
  //         shape="round"
  //         theme={statusNameListMap[row.status].theme}
  //         variant="light-outline"
  //       >
  //         {statusNameListMap[row.status].icon}
  //         {statusNameListMap[row.status].label}
  //       </t-tag>
  //     );
  //   },
  //   align: "center",
  // },
  { colKey: "channel", title: "创建时间", align: "center", width: 300 },
  {
    colKey: "operation",
    title: "操作",
    width: 300,
    align: "center",
  },
]);

const handleRowClick = (e) => {
  console.log(e);
};

const pagination = {
  defaultCurrent: 1,
  defaultPageSize: 10,
  total,
};
</script>
<style lang="scss" scoped>
.box {
  width: calc(100% - 30px);
  padding-left: 20px;
  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .t-form__item {
      display: inline-block;
    }
    .t-form__controls-content {
      width: 200px;
    }
    .btn {
      margin-left: 20px;
    }
    .rigth {
      float: right;
      margin-right: 30px;
    }
    .tdesign-demo-dropdown {
      &__text {
        display: inline-flex;
        align-items: center;
        .t-icon {
          margin-left: 8px;
        }
      }
    }
  }
  .tab_box {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    // overflow-y: scroll;
    height: calc(100vh - 283px);
    .result {
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      .number {
        color: cornflowerblue;
      }
    }
    .t-link {
      margin-right: 15px;
      color: rgb(59, 182, 254);
    }
  }
}
</style>
